<template>
  <div class="process-management-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>工序管理</h2>
      <p class="page-description">管理系统中的所有工序信息</p>
    </div>

    <!-- 操作栏 -->
    <div class="action-bar">
      <div class="action-left">
        <el-button type="primary" :icon="Plus" @click="handleAdd">
          新增
        </el-button>
        <el-button 
          type="danger" 
          :icon="Delete" 
          :disabled="selectedRows.length === 0"
          @click="handleBatchDelete"
        >
          批量删除
        </el-button>
        <el-button :icon="Download" @click="handleExport">
          导出
        </el-button>
      </div>
      
      <div class="action-right">
        <el-input
          v-model="searchText"
          placeholder="请输入工序编号或名称"
          :prefix-icon="Search"
          clearable
          style="width: 300px; margin-right: 10px;"
          @keyup.enter="handleSearch"
        />
        <el-button type="primary" :icon="Search" @click="handleSearch">
          搜索
        </el-button>
      </div>
    </div>

    <!-- 筛选栏 -->
    <div class="filter-bar">
      <el-form inline>
        <el-form-item label="工序分类:">
          <el-select
            v-model="filterParams.processCategoryId"
            placeholder="请选择工序分类"
            clearable
            style="width: 200px;"
            @change="handleSearch"
          >
            <el-option
              v-for="category in categoryList"
              :key="category.id"
              :label="category.processCategoryName"
              :value="category.id"
            />
          </el-select>
        </el-form-item>
        
        <el-form-item label="所属部门:">
          <el-input
            v-model="filterParams.department"
            placeholder="请输入部门名称"
            clearable
            style="width: 150px;"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        
        <el-form-item label="负责人:">
          <el-input
            v-model="filterParams.responsiblePerson"
            placeholder="请输入负责人"
            clearable
            style="width: 150px;"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        
        <el-form-item label="状态:">
          <el-select
            v-model="filterParams.isActive"
            placeholder="请选择状态"
            clearable
            style="width: 120px;"
            @change="handleSearch"
          >
            <el-option label="启用" :value="true" />
            <el-option label="禁用" :value="false" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table
      ref="tableRef"
      v-loading="loading"
      :data="tableData"
      border
      stripe
      height="calc(100vh - 320px)"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" type="index" width="80" :index="getRowIndex" />
      <el-table-column prop="processNumber" label="工序编号" min-width="120" />
      <el-table-column prop="processName" label="工序名称" min-width="150" />
      <el-table-column prop="processCategoryName" label="工序分类" width="120" />
      <el-table-column prop="department" label="所属部门" width="120" />
      <el-table-column prop="responsiblePerson" label="负责人" width="100" />
      <el-table-column label="状态" width="80">
        <template #default="{ row }">
          <el-tag :type="row.isActive ? 'success' : 'danger'">
            {{ row.isActive ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="备注" min-width="200" show-overflow-tooltip />
      <el-table-column prop="createdTime" label="创建时间" width="220">
        <template #default="{ row }">
          {{ formatDateTime(row.createdTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" link size="small" @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button type="danger" link size="small" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-section">
      <el-pagination
        v-model:current-page="pagination.pageIndex"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handlePageSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>

  <!-- 新增/编辑抽屉 -->
  <el-drawer
    v-model="drawerVisible"
    :title="drawerTitle"
    direction="rtl"
    size="500px"
    @close="handleDrawerClose"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      @submit.prevent
    >
      <el-form-item label="工序编号" prop="processNumber">
        <div style="display: flex; gap: 8px;">
          <el-input
            v-model="formData.processNumber"
            placeholder="请输入工序编号或点击系统编码"
            maxlength="50"
            show-word-limit
            style="flex: 1;"
          />
          <el-tooltip content="点击生成系统编码" placement="top">
            <el-button
              type="primary"
              :icon="Star"
              @click="handleGenerateCode"
              :loading="generateCodeLoading"
            >
              系统编码
            </el-button>
          </el-tooltip>
        </div>
      </el-form-item>
      
      <el-form-item label="工序名称" prop="processName">
        <el-input
          v-model="formData.processName"
          placeholder="请输入工序名称"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="工序分类" prop="processCategoryId">
        <el-select
          v-model="formData.processCategoryId"
          placeholder="请选择工序分类"
          style="width: 100%"
        >
          <el-option
            v-for="category in categoryList"
            :key="category.id"
            :label="category.processCategoryName"
            :value="category.id"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="所属部门" prop="department">
        <el-input
          v-model="formData.department"
          placeholder="请输入所属部门"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="负责人" prop="responsiblePerson">
        <el-input
          v-model="formData.responsiblePerson"
          placeholder="请输入负责人"
          maxlength="50"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="状态" prop="isActive">
        <el-switch
          v-model="formData.isActive"
          active-text="启用"
          inactive-text="禁用"
        />
      </el-form-item>
      
      <el-form-item label="备注" prop="remarks">
        <el-input
          v-model="formData.remarks"
          type="textarea"
          :rows="3"
          placeholder="请输入备注"
          maxlength="500"
          show-word-limit
        />
      </el-form-item>
      
      <!-- 附件上传 -->
      <el-form-item label="附件" prop="attachments">
        <div class="attachment-upload-container">
          <el-upload
            ref="attachmentUploadRef"
            :action="attachmentUploadUrl"
            :headers="uploadHeaders"
            :multiple="true"
            :limit="5"
            :file-list="attachmentFileList"
            :before-upload="beforeAttachmentUpload"
            :on-success="onAttachmentUploadSuccess"
            :on-error="onAttachmentUploadError"
            :on-exceed="onAttachmentExceed"
            :on-remove="onAttachmentRemove"
            :accept="'.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar'"
            drag
            class="attachment-upload"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持 PDF、Word、Excel、PPT、TXT、ZIP、RAR 格式文件，单个文件不超过10MB，最多上传5个文件
              </div>
            </template>
          </el-upload>
        </div>
      </el-form-item>
      
      <!-- 图片上传 -->
      <el-form-item label="图片" prop="images">
        <div class="image-upload-container">
          <el-upload
            ref="imageUploadRef"
            :action="imageUploadUrl"
            :headers="uploadHeaders"
            :multiple="true"
            :limit="10"
            :file-list="imageFileList"
            :before-upload="beforeImageUpload"
            :on-success="onImageUploadSuccess"
            :on-error="onImageUploadError"
            :on-exceed="onImageExceed"
            :on-remove="onImageRemove"
            :accept="'.jpg,.jpeg,.png,.gif,.bmp,.webp'"
            list-type="picture-card"
            class="image-upload"
          >
            <el-icon><Plus /></el-icon>
            <template #tip>
              <div class="el-upload__tip">
                支持 JPG、PNG、GIF、BMP、WEBP 格式图片，单个文件不超过10MB，最多上传10张图片
              </div>
            </template>
          </el-upload>
          
          <!-- 图片预览对话框 -->
          <el-dialog v-model="imagePreviewVisible" title="图片预览" width="60%">
            <img :src="imagePreviewUrl" alt="预览图片" style="width: 100%; max-height: 500px; object-fit: contain;" />
          </el-dialog>
        </div>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <div style="text-align: right">
        <el-button @click="drawerVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
          确定
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus,
  Download,
  Search,
  Edit,
  Delete,
  Star,
  UploadFilled
} from '@element-plus/icons-vue'
import { 
  getProcessPage, 
  createProcess, 
  updateProcess, 
  deleteProcess, 
  batchDeleteProcesses, 
  exportProcesses,
  getProcessCategoryPage,
  getActiveProcessCategories,
  generateProcessCode
} from '@/services/ProcessManagementApi'
import type { 
  Process, 
  ProcessQueryParams, 
  ProcessCreateDto, 
  ProcessUpdateDto,
  ProcessCategory 
} from '@/types/process'

// 时间格式化函数
const formatDateTime = (dateTime: string | null | undefined): string => {
  if (!dateTime) return '-'
  
  try {
    const date = new Date(dateTime)
    if (isNaN(date.getTime())) return '-'
    
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    
    return `${year}年${month}月${day}日${hours}时${minutes}分${seconds}秒`
  } catch (error) {
    console.error('时间格式化错误:', error)
    return '-'
  }
}

// 响应式数据
const loading = ref(false)
const searchText = ref('')
const tableData = ref<Process[]>([])
const selectedRows = ref<Process[]>([])
const tableRef = ref()
const categoryList = ref<ProcessCategory[]>([])

// 筛选参数
const filterParams = reactive({
  processCategoryId: undefined as number | undefined,
  department: '',
  responsiblePerson: '',
  isActive: undefined as boolean | undefined
})

// 分页数据
const pagination = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0
})

// 抽屉相关
const drawerVisible = ref(false)
const drawerTitle = ref('')
const isEdit = ref(false)
const submitLoading = ref(false)
const formRef = ref()
const generateCodeLoading = ref(false)

// 表单数据
const formData = ref<ProcessCreateDto & { id?: number; attachments?: string[]; images?: string[] }>({
  processNumber: '',
  processName: '',
  processCategoryId: 0,
  department: '',
  responsiblePerson: '',
  isActive: true,
  remarks: '',
  attachments: [],
  images: []
})

// 文件上传相关
const attachmentUploadUrl = ref('http://localhost:7296/api/FileUpload/attachment')
const imageUploadUrl = ref('http://localhost:7296/api/FileUpload/image')
const uploadHeaders = ref({
  'Content-Type': 'multipart/form-data'
})

// 附件文件列表
const attachmentFileList = ref<any[]>([])
const attachmentUploadRef = ref()

// 图片文件列表
const imageFileList = ref<any[]>([])
const imageUploadRef = ref()

// 图片预览
const imagePreviewVisible = ref(false)
const imagePreviewUrl = ref('')

// 表单验证规则
const formRules = {
  processNumber: [
    { required: true, message: '请输入工序编号', trigger: 'blur' },
    { max: 50, message: '工序编号不能超过50个字符', trigger: 'blur' }
  ],
  processName: [
    { required: true, message: '请输入工序名称', trigger: 'blur' },
    { max: 100, message: '工序名称不能超过100个字符', trigger: 'blur' }
  ],
  processCategoryId: [
    { required: true, message: '请选择工序分类', trigger: 'change' }
  ],
  department: [
    { max: 100, message: '所属部门不能超过100个字符', trigger: 'blur' }
  ],
  responsiblePerson: [
    { max: 50, message: '负责人不能超过50个字符', trigger: 'blur' }
  ]
}

// 获取行索引（考虑分页）
const getRowIndex = (index: number) => {
  return (pagination.pageIndex - 1) * pagination.pageSize + index + 1
}

// 加载工序分类数据
const loadCategoryData = async () => {
  try {
    console.log('开始加载工序分类下拉选项')
    const response = await getActiveProcessCategories()
    console.log('工序分类下拉选项响应:', response)
    if (response.code === 200) {
      categoryList.value = response.data || []
      console.log('成功加载工序分类选项:', categoryList.value)
    } else {
      console.error('获取工序分类选项失败:', response.msg)
      ElMessage.error(response.msg || '获取工序分类选项失败')
    }
  } catch (error) {
    console.error('加载工序分类失败:', error)
    ElMessage.error('加载工序分类失败，请重试')
  }
}

// 加载工序数据
const loadData = async () => {
  try {
    loading.value = true
    const params: ProcessQueryParams = {
      NumberOrName: searchText.value.trim() || undefined,
      ProcessCategoryId: filterParams.processCategoryId,
      Department: filterParams.department.trim() || undefined,
      ResponsiblePerson: filterParams.responsiblePerson.trim() || undefined,
      IsActive: filterParams.isActive,
      pageIndex: pagination.pageIndex,
      pageSize: pagination.pageSize
    }

    console.log('开始加载工序数据，参数:', params)
    const response = await getProcessPage(params)
    console.log('工序数据响应:', response)
    
    if (response.code === 200) {
      tableData.value = response.pageData || []
      pagination.total = response.totaCount || 0
      console.log('成功加载工序数据:', {
        total: pagination.total,
        dataLength: tableData.value.length,
        data: tableData.value
      })
      
      // 清空选择状态
      selectedRows.value = []
      
      if (tableData.value.length === 0) {
        console.warn('工序数据为空，但API调用成功')
      }
    } else {
      console.error('工序API返回错误:', response)
      ElMessage.error(response.msg || '获取工序数据失败')
      tableData.value = []
      pagination.total = 0
    }
  } catch (error) {
    console.error('加载工序数据失败:', error)
    ElMessage.error('加载工序数据失败，请重试')
    tableData.value = []
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.pageIndex = 1
  loadData()
}

// 重置搜索
const handleReset = () => {
  searchText.value = ''
  filterParams.processCategoryId = undefined
  filterParams.department = ''
  filterParams.responsiblePerson = ''
  filterParams.isActive = undefined
  handleSearch()
}

// 新增
const handleAdd = () => {
  drawerTitle.value = '新增工序'
  isEdit.value = false
  formData.value = {
    processNumber: '',
    processName: '',
    processCategoryId: 0,
    department: '',
    responsiblePerson: '',
    isActive: true,
    remarks: '',
    attachments: [],
    images: []
  }
  // 清空文件列表
  attachmentFileList.value = []
  imageFileList.value = []
  drawerVisible.value = true
}

// 编辑
const handleEdit = (row: Process) => {
  drawerTitle.value = '编辑工序'
  isEdit.value = true
  formData.value = {
    id: row.id,
    processNumber: row.processNumber,
    processName: row.processName,
    processCategoryId: row.processCategoryId,
    department: row.department || '',
    responsiblePerson: row.responsiblePerson || '',
    isActive: row.isActive,
    remarks: row.remarks || '',
    attachments: (row as any).attachments || [],
    images: (row as any).images || []
  }
  
  // 设置文件列表（如果有的话）
  attachmentFileList.value = formData.value.attachments?.map((url, index) => ({
    name: `附件${index + 1}`,
    url: url,
    response: { success: true, data: { fileUrl: url } }
  })) || []
  
  imageFileList.value = formData.value.images?.map((url, index) => ({
    name: `图片${index + 1}`,
    url: url,
    response: { success: true, data: { fileUrl: url } }
  })) || []
  
  drawerVisible.value = true
}

// 删除
const handleDelete = async (row: Process) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除工序"${row.processName}"吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    console.log('开始删除工序:', row.id)
    const response = await deleteProcess(row.id)
    
    if (response.code === 200) {
      ElMessage.success('删除成功')
      await loadData()
    } else {
      ElMessage.error(response.msg || '删除失败')
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('删除工序失败:', error)
      ElMessage.error('删除失败，请重试')
    }
  }
}

// 批量删除
const handleBatchDelete = async () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的工序')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedRows.value.length} 个工序吗？`,
      '批量删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    const ids = selectedRows.value.map(row => row.id)
    console.log('开始批量删除工序:', ids)
    const response = await batchDeleteProcesses(ids)
    
    if (response.code === 200) {
      ElMessage.success('批量删除成功')
      await loadData()
    } else {
      ElMessage.error(response.msg || '批量删除失败')
    }
  } catch (error: any) {
    if (error !== 'cancel') {
      console.error('批量删除工序失败:', error)
      ElMessage.error('批量删除失败，请重试')
    }
  }
}

// 导出
const handleExport = async () => {
  try {
    console.log('开始导出工序数据')
    const params = {
      NumberOrName: searchText.value.trim() || undefined,
      ProcessCategoryId: filterParams.processCategoryId,
      Department: filterParams.department.trim() || undefined,
      ResponsiblePerson: filterParams.responsiblePerson.trim() || undefined,
      IsActive: filterParams.isActive
    }
    
    const result = await exportProcesses(params)
    
    if (result.success) {
      ElMessage.success(result.message)
    } else {
      ElMessage.error(result.message)
    }
  } catch (error) {
    console.error('导出工序失败:', error)
    ElMessage.error('导出失败，请重试')
  }
}

// 生成系统编码
const handleGenerateCode = async () => {
  if (generateCodeLoading.value) return
  generateCodeLoading.value = true
  try {
    const response = await generateProcessCode()
    if (response.code === 200) {
      formData.value.processNumber = response.data || ''
      ElMessage.success('系统编码生成成功！')
    } else {
      ElMessage.error(response.msg || '生成系统编码失败')
    }
  } catch (error) {
    console.error('生成系统编码失败:', error)
    ElMessage.error('生成系统编码失败，请重试')
  } finally {
    generateCodeLoading.value = false
  }
}

// 表格选择变化
const handleSelectionChange = (selection: Process[]) => {
  selectedRows.value = selection
}

// 分页大小变化
const handlePageSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.pageIndex = 1
  loadData()
}

// 页码变化
const handlePageChange = (page: number) => {
  pagination.pageIndex = page
  loadData()
}

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    
    submitLoading.value = true
    
    if (isEdit.value) {
      // 编辑
      const updateData: ProcessUpdateDto = {
        id: formData.value.id!,
        processNumber: formData.value.processNumber,
        processName: formData.value.processName,
        processCategoryId: formData.value.processCategoryId,
        department: formData.value.department,
        responsiblePerson: formData.value.responsiblePerson,
        isActive: formData.value.isActive,
        remarks: formData.value.remarks
      }
      
      console.log('开始更新工序:', updateData)
      const response = await updateProcess(updateData)
      
      if (response.code === 200) {
        ElMessage.success('更新成功')
        drawerVisible.value = false
        await loadData()
      } else {
        ElMessage.error(response.msg || '更新失败')
      }
    } else {
      // 新增
      const createData: ProcessCreateDto = {
        processNumber: formData.value.processNumber,
        processName: formData.value.processName,
        processCategoryId: formData.value.processCategoryId,
        department: formData.value.department,
        responsiblePerson: formData.value.responsiblePerson,
        isActive: formData.value.isActive,
        remarks: formData.value.remarks
      }
      
      console.log('开始创建工序:', createData)
      const response = await createProcess(createData)
      
      if (response.code === 200) {
        ElMessage.success('创建成功')
        drawerVisible.value = false
        await loadData()
      } else {
        ElMessage.error(response.msg || '创建失败')
      }
    }
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    submitLoading.value = false
  }
}

// 附件上传相关方法
const beforeAttachmentUpload = (file: File) => {
  const isValidType = ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx', '.txt', '.zip', '.rar']
    .some(ext => file.name.toLowerCase().endsWith(ext))
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isValidType) {
    ElMessage.error('只支持 PDF、Word、Excel、PPT、TXT、ZIP、RAR 格式文件!')
    return false
  }
  if (!isLt10M) {
    ElMessage.error('文件大小不能超过 10MB!')
    return false
  }
  return true
}

const onAttachmentUploadSuccess = (response: any, file: any) => {
  if (response.success) {
    formData.value.attachments = formData.value.attachments || []
    formData.value.attachments.push(response.data.fileUrl)
    ElMessage.success('附件上传成功')
  } else {
    ElMessage.error(response.message || '附件上传失败')
  }
}

const onAttachmentUploadError = (error: any) => {
  console.error('附件上传失败:', error)
  ElMessage.error('附件上传失败，请重试')
}

const onAttachmentExceed = () => {
  ElMessage.warning('最多只能上传5个附件!')
}

const onAttachmentRemove = (file: any) => {
  if (formData.value.attachments && file.response?.data?.fileUrl) {
    const index = formData.value.attachments.indexOf(file.response.data.fileUrl)
    if (index > -1) {
      formData.value.attachments.splice(index, 1)
    }
  }
}

// 图片上传相关方法
const beforeImageUpload = (file: File) => {
  const isValidType = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
    .some(ext => file.name.toLowerCase().endsWith(ext))
  const isLt10M = file.size / 1024 / 1024 < 10

  if (!isValidType) {
    ElMessage.error('只支持 JPG、PNG、GIF、BMP、WEBP 格式图片!')
    return false
  }
  if (!isLt10M) {
    ElMessage.error('图片大小不能超过 10MB!')
    return false
  }
  return true
}

const onImageUploadSuccess = (response: any, file: any) => {
  if (response.success) {
    formData.value.images = formData.value.images || []
    formData.value.images.push(response.data.fileUrl)
    ElMessage.success('图片上传成功')
  } else {
    ElMessage.error(response.message || '图片上传失败')
  }
}

const onImageUploadError = (error: any) => {
  console.error('图片上传失败:', error)
  ElMessage.error('图片上传失败，请重试')
}

const onImageExceed = () => {
  ElMessage.warning('最多只能上传10张图片!')
}

const onImageRemove = (file: any) => {
  if (formData.value.images && file.response?.data?.fileUrl) {
    const index = formData.value.images.indexOf(file.response.data.fileUrl)
    if (index > -1) {
      formData.value.images.splice(index, 1)
    }
  }
}

// 关闭抽屉
const handleDrawerClose = () => {
  formRef.value?.resetFields()
  formData.value = {
    processNumber: '',
    processName: '',
    processCategoryId: 0,
    department: '',
    responsiblePerson: '',
    isActive: true,
    remarks: '',
    attachments: [],
    images: []
  }
  // 清空文件列表
  attachmentFileList.value = []
  imageFileList.value = []
}

// 组件挂载后执行
onMounted(() => {
  loadCategoryData()
  loadData()
})
</script>

<style scoped>
.process-management-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 5px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-description {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-left {
  display: flex;
  gap: 10px;
}

.action-right {
  display: flex;
  align-items: center;
}

.filter-bar {
  margin-bottom: 20px;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-bar .el-form {
  margin: 0;
}

.filter-bar .el-form-item {
  margin-bottom: 0;
  margin-right: 20px;
}

.pagination-section {
  margin-top: 20px;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
}

.dialog-footer {
  text-align: right;
}

.el-table {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 文件上传样式 */
.attachment-upload-container {
  width: 100%;
}

.attachment-upload {
  width: 100%;
}

.attachment-upload .el-upload-dragger {
  width: 100%;
  height: 120px;
  border-radius: 6px;
  border: 2px dashed #d9d9d9;
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s;
}

.attachment-upload .el-upload-dragger:hover {
  border-color: #409EFF;
}

.attachment-upload .el-icon--upload {
  font-size: 32px;
  color: #c0c4cc;
  margin-bottom: 8px;
}

.attachment-upload .el-upload__text {
  color: #606266;
  font-size: 14px;
}

.attachment-upload .el-upload__text em {
  color: #409EFF;
  font-style: normal;
}

.attachment-upload .el-upload__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}

/* 图片上传样式 */
.image-upload-container {
  width: 100%;
}

.image-upload {
  width: 100%;
}

.image-upload .el-upload--picture-card {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  border: 1px dashed #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #8c939d;
  cursor: pointer;
  transition: all 0.3s;
}

.image-upload .el-upload--picture-card:hover {
  border-color: #409EFF;
  color: #409EFF;
}

.image-upload .el-upload-list--picture-card .el-upload-list__item {
  width: 80px;
  height: 80px;
  margin: 0 8px 8px 0;
  border-radius: 6px;
}

.image-upload .el-upload__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 8px;
}
</style> 